:root {
	--totalWid: 100vw;
	--themeColor: #0d60d0;
}

html,
body {
	width: var(--totalWid);
	overflow-x: hidden;
}

/* 头部 */
header {
	position: absolute;
	top:0;
	left:0;
	padding: 0 20px;
	width: 100%;
	min-width: 1200px;
	height: 66px;
	/* background-color: #0d60d0; */
	border-bottom: 1px solid #ddd;
	/* 层级 */
	z-index: 40;
}

header  a {
	width: 138px;
    height: 64px;
    display: block;
}

header a h1 {
	height: 64px;
	background: url(../imgs/new-logo-white.png) no-repeat;
}


header ul li a{
	text-align: center;
	display: block;
	width: 60px;
	height: 66px;
	line-height: 64px;
	color:#fff;
}


header li.active {

	border-bottom: 2px solid #fff;
}
header li.active a{
	color:#fff;
}

header div span {
	display: inline-block;
	padding: 5px 8px;
	border-radius: 15px;
	font-size: 12px;
}

header div span:first-child {
	border: 1px solid #fff;
}

header div span:last-child {
    background-color: #ed510a;
    border: 1px solid #ed510a;
    margin-right: 20px;
    
}

/* 主体 */
main {
	margin: 0;
	padding: 0;
}

/* 轮播图 */
#banner {
	width: var(--totalWid);
    height: 610px;
    /* 测试颜色 */
	/* background-color: rgb(173, 204, 33);    */
}

#banner .swiper .swiper-wrapper div {
	width: 100%;
	height: 610px;
}
#banner .swiper .swiper-wrapper div:first-child{
	background: url(../imgs/banner1.png) no-repeat center;
	background-size:cover;
}
#banner .swiper .swiper-wrapper div:nth-child(2){
	background: url(../imgs/banner2.png) no-repeat center;
	background-size:cover;
}
#banner .swiper .swiper-wrapper div:last-child{
	background: url(../imgs/banner3.png) no-repeat center;
	background-size:cover;
}


/* 开发者 */

#cloud {
	width: 100%;
	height: 620px;
	/* background-color: rgb(234, 243, 157); */
}
#cloud li{
	width: 240px;
	height: 280px;
	background-color: #fff;
	box-shadow:8px 9px 10px #8ebbfa;
	
} 

/* 海量API */
#apiList{
	width: 100%;
	height: 633px;
	background: url(../imgs/more-api-bg.svg) no-repeat center;
	/* background-color: rgb(193, 253, 144); */
	
}
#apiList ul{
	flex-wrap: wrap;
}

#apiList li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 226px;
	height: 140px;
	/* border: 1px solid black; */
	background-color: #fff;
	margin-bottom: 10px;
	box-shadow: 5px 4px 10px #69a7ff;
}
#apiList li img{
	width: 50px;
	height: 50px;
}
#apiList li p{
	line-height: 28px;
}

/* 慧集 */
#master{
	width: 100%;
	height: 800px;
	/* background-color: rgb(145, 125, 34); */
}
#master .master-box{
	height: 600px;
	
}
#master .master-box img {
	width: 603px;
	height: 600px;
}
#master .master-box .masterB-right {
	width: 520px;
	height: 600px;
	/* border: 1px solid chartreuse; */
	right:0;
	top:0;
		
}

/* 集云右边文字区 */
#master .masterB-right li{
	width: 520px;
	height: 80px;
	background-color: rgb(247, 247, 247);
	color:#454444;
	margin-bottom: 24px;
	position: relative;
	padding: 20px 37px;
	box-sizing: border-box;
}
#master .masterB-right ul{
	position: relative;
}

#master li::before{
	content: "";
	width: 4px;
	height: 25px;
	background:rgb(0, 170, 255);
	margin: 0 10px;
	position: absolute;
	left: 10px;
	top:30px;
	display:block;
	
}

#master .masterB-right ul img{
	width: 20px;
	height: 20px;
}

#master .masterB-right ul span{
	font-size: 20px;
	
}

#master .masterB-right ul p{
	font-size: 10px;
	line-height: 35px;
	
}


/* 独角兽区 */

#unicorn{
	width: 100%;
	min-width: 1200px;
	height: 530px;
	/* background-color: darkkhaki; */
}
#unicornBg{
	left:0;
	bottom:-7px;
	width: 100%;
	height: 290px;
	background-color: rgb(245, 245, 245);
	z-index: 1;
	position: relative;
	
}
#unicorn .unicornCont{
	left :50%;
	transform: translate(-50%);
	display: flex;
	height: 290px;
	/* opacity: 0; */
	transition: opacity 0.5s;
	z-index: 9;
	/* display: none; */

	
}

#unicornRt img{
	width: 45px;
	height: 45px;
	
}

#unicornRt{
	position: relative;
	box-sizing: border-box;
	height: 290px;
	width: 450px;
	position: absolute;
	right:0;
	top:0;

}
#unicornRt p:nth-child(2){
	margin-top: 10px;
	font-size: 14px;
	line-height: 23px;

}
#unicornRt p:last-child{
	text-align: right;
	position: relative;	
	margin-top: 10px;
}
#unicornRt p:last-child span{
	content: "";
	width: 14px;
	height:5px;
	background:rgb(0, 170, 255);
	margin: 0 10px;
	position: absolute;
	right:110px;
	bottom:5px;
	display:block;
	
}



/* 数据安全 */
#safe{
	width: 100%;
	height: 439px;
	/* background-color: darksalmon; */
}
#safe .flex-c-sb{
	height: 107px;
	/* border:1px solid darkslateblue; */
}
#safe ul li{
	height: 107px;
	width: 98px;
	/* background-color: deeppink; */
	display: flex;
	justify-content: center;
	align-items:last baseline;
	flex-wrap: wrap;

}
#safe li img{
	height: 70px;
}
#safe li p{
	font-size: 10px;
}

/* 广告区 */
#adv{
	width: 100%;
	min-width: 1200px;
	height: 240px;
	background: url(../imgs/login-register-bg.svg);
	background-color: #1271ef;
}
#adv h1{
	display: block;
	height: 40px;
	line-height: 40px;
	color: #fff;
	font-size: 38px;
}
#adv button{
	width: 133px;
	height: 40px;
	background-color: #1271ef;
	border:1px solid #fff;
	color:#fff;
}

/* 尾部 */
footer{
	width: 100%;
	height: 330px;
}
/* 左边列表 */
footer .footLeft{
	width: 720px;
	height: 330px;
	
}
footer .footLeft-top{
	width: 720px;
	height: 202px;
	margin-top: 50px;
}
footer .footLeft dl{
	width: 85px;
	height: 202px;
	
}
footer .footLeft-top dl dt{
	font-size: 13px;
	font-weight: bold;
	color:rgb(54, 54, 54);
	margin-bottom:30px;
}
footer .footLeft-top dl dd{
	font-size: 9px;
	color:rgb(120, 120, 120);
	margin-top:15px;
}
footer .footLeft-top dl dd:hover{
	color:var(--themeColor);

}

/* 左下logo文字 */
footer .footLeft-bottom{
	margin-top: 30px;
	/* background-color: rgb(114, 171, 250); */
	height: 20px;
	color:rgb(120, 120, 120);	
}
footer .footLeft-bottom img{
	margin-right: 10px;
}
footer .footLeft-bottom span{
	line-height: 20px;
}	


/* 右边二维码 */
.footRight{
	/* display: flex; */
	/* align-items: flex-end; */
	/* justify-content:flex-start; */
	width: 230px;
	height: 330px;
	/* background-color: rebeccapurple ; */
	flex-wrap: wrap;
	text-align: right;
}
.footRight img{
	width: 100px;
	height: 100px;
	margin: 20px 0 55px 0;
}
.footRight :first-child{
	color:rgb(54, 54, 54);
	/* display: inline-block; */
}
.footRight :nth-child(2){
	color:rgb(120, 120, 120);
	margin: 15px 0;
	/* display: inline-block; */
}

/* 回到顶部 */
#goback img{
	width: 165px;
	height: 100px;
	position: fixed;
	bottom:0;
	right:0;
	/* 先隐藏 */
	/* opacity: 0; */
}

